// 1. 导入 axios
import axios from 'axios'
// 导入 store 模块
// 可以通过 store.state.xxx 来访问 vuex 中的全局数据
import store from '@/store'
// 导入 router 路由模块
// 可以通过 router.xxx 等编程式导航的 API
import router from '@/router/index.js'
// import { Loading } from 'element-ui'
// 2. 调用 axios.create()
const request = axios.create({
  // 配置请求的根路径
  baseURL: 'http://www.liulongbin.top:3008'
})
// let instance = null
// 为 request 实例对象，添加请求拦截器
// Add a request interceptor
request.interceptors.request.use((config) => {
  // instance = Loading.service({
  //   background: 'rgba(0,0,0,0.8)',
  //   spinner: 'el-icon-Loading',
  //   text: '数据加载中。。。'
  // })
  // Do something before request is sent
  // 1. 判断用户请求的是否为“有权限的”接口
  // 1.1 如果不是有权限的接口，不需要添加 token
  // 1.2 如果是有权限的接口，则需要为 config.headers 对象，添加 Authorization 属性
  // 2. Authorization 属性的值，必须是 vuex 中 token 的值
  // 3. 解决一个问题：在 utils/request.js 中如何获取到 vuex 中的 token 数据
  if (config.url.startsWith('/my')) {
    // 请求的是一个有权限的接口，需要为 config.headers 对象，添加 Authorization 属性
    config.headers.Authorization = store.state.token
  }
  // console.log('触发了请求拦截器，', config)
  return config
}, (error) => {
  // Do something with request error
  return Promise.reject(error)
})

// 为 request 实例对象，添加响应拦截器
request.interceptors.response.use((response) => {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  return response
}, (error) => {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  if (error.response.status === 401) {
    // token 无效，需要清空token，再重新登录
    store.commit('updateToken', '')
    router.push('/login')
  }
  return Promise.reject(error)
})

// 3. 向外导出 axios 的实例对象
export default request
